<%@include file="common/head.jspf" %>

<div id="main" role="main">
    <div id="title-bar">
        <ul id="breadcrumbs">
            <li>
                <a href="dashboard.jsp" title="Home">
                    <span id="bc-home"></span>
                </a>
            </li>
            <li ><a href="grafico.jsp">Indicadores</a></li>
            <li class="no-hover">Expedientes por Proceso</li>
        </ul>
    </div>
    <div class="shadow-bottom shadow-titlebar"></div>
    <div id="main-content">
        <div class="container_12">
            <div class="grid_12">
                <div class="block-border" id="tab-panel-1">
                    <div class="block-header upper">
                        <h1>Reporte de Expedientes por Proceso</h1>
                        <span></span>
                        <ul class="tabs">
                            <li class="active" style=""><a href="#tab-Chart">Gr&aacute;fico</a></li>
                            <li><a href="#tab-Filtro">Filtro</a></li>
                        </ul>
                    </div>
                    <div class="block-content tab-container">
                        <div id="tab-Chart" class="tab-content" style="display: block;">
                            <div id="containerChart" style="overflow: auto"></div>
                        </div>

                        <div id="tab-Filtro" class="tab-content" style="display: block; height: 200px;">
                            <h2>Filtro</h2><br/>
                            Fecha Inicio:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="date" style="width: 150px;"/><br/><br/>
                            Fecha Fin:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="date" style="width: 150px;"/><br/><br/>
                            Tipo de Procesos: <input type="text" style="width:150px"/>
                            <br/>
                            <br/>
                            <br/>
                            <table width="250px">
                                <tr valign="middle">
                                    <td align="left" width="50%">
                                        <a class="button red" id="resetTarea"  href="#">Limpiar</a>
                                    </td>
                                    <td align="right" width="50%">
                                        <input type="submit"  id="addRealizar" style="width: 100px;" class="button" value="Filtrar">
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="grid_12"> 
                <div class="block-border">
                    <div class="block-header">
                        <h1>Informe</h1><span></span>
                    </div>
                    <div class="block-content">
                        <table id="table-example" class="table">
                            <thead>
                                <tr>
                                    <th class="sorting_asc" rowspan="1" colspan="1" style="width: 190px; ">N&uacute;mero Expediente</th>
                                    <th class="sorting" rowspan="1" colspan="1" style="width: 255px; ">Tipo de Proceso</th>
                                    <th class="sorting" rowspan="1" colspan="1" style="width: 246px; ">Encargado</th>
                                    <th class="sorting" rowspan="1" colspan="1" style="width: 164px; ">Monto (millones de colones)</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr >
                                    <td class=" sorting_1">234234</td>
                                    <td>Laboral</td>
                                    <td>Federico Salazar</td>
                                    <td class="center">125.5</td>
                                </tr>
                                <tr>
                                    <td class=" sorting_1">234234</td>
                                    <td>Laboral</td>
                                    <td>Federico Salazar</td>
                                    <td class="center">125.5</td>
                                </tr>
                                <tr>
                                    <td class=" sorting_1">234234</td>
                                    <td>Laboral</td>
                                    <td>Federico Salazar</td>
                                    <td class="center">125.5</td>
                                </tr>
                                <tr>
                                    <td class=" sorting_1">234234</td>
                                    <td>Laboral</td>
                                    <td>Federico Salazar</td>
                                    <td class="center">125.5</td>
                                </tr>
                                <tr>
                                    <td class=" sorting_1">234234</td>
                                    <td>Penal</td>
                                    <td>Grace Vargas</td>
                                    <td class="center">125.5</td>
                                </tr>
                                <tr>
                                    <td class=" sorting_1">234234</td>
                                    <td>Penal</td>
                                    <td>Grace Vargas</td>
                                    <td class="center">125.5</td>
                                </tr>
                                <tr>
                                    <td class=" sorting_1">234234</td>
                                    <td>Penal</td>
                                    <td>Grace Vargas</td>
                                    <td class="center">125.5</td>
                                </tr>
                                <tr>
                                    <td class=" sorting_1">234234</td>
                                    <td>Penal</td>
                                    <td>Grace Vargas</td>
                                    <td class="center">125.5</td>
                                </tr>
                                <tr>
                                    <td class=" sorting_1">234234</td>
                                    <td>Penal</td>
                                    <td>Grace Vargas</td>
                                    <td class="center">125.5</td>
                                </tr>
                                <tr>
                                    <td class=" sorting_1">234234</td>
                                    <td>Penal</td>
                                    <td>Grace Vargas</td>
                                    <td class="center">125.5</td>
                                </tr>
                                <tr>
                                    <td class=" sorting_1">234234</td>
                                    <td>Penal</td>
                                    <td>Grace Vargas</td>
                                    <td class="center">125.5</td>
                                </tr>
                                <tr>
                                    <td class=" sorting_1">234234</td>
                                    <td>Penal</td>
                                    <td>Grace Vargas</td>
                                    <td class="center">125.5</td>
                                </tr>
                                <tr>
                                    <td class=" sorting_1">234234</td>
                                    <td>Penal</td>
                                    <td>Grace Vargas</td>
                                    <td class="center">125.5</td>
                                </tr>
                                <tr>
                                    <td class=" sorting_1">234234</td>
                                    <td>Constitucional</td>
                                    <td>Mario Rodriguez</td>
                                    <td class="center">125.5</td>
                                </tr>
                                <tr>
                                    <td class=" sorting_1">234234</td>
                                    <td>Constitucional</td>
                                    <td>Mario Rodriguez</td>
                                    <td class="center">125.5</td>
                                </tr>
                                <tr>
                                    <td class=" sorting_1">234234</td>
                                    <td>Constitucional</td>
                                    <td>Mario Rodriguez</td>
                                    <td class="center">125.5</td>
                                </tr>
                                <tr>
                                    <td class=" sorting_1">234234</td>
                                    <td>Constitucional</td>
                                    <td>Mario Rodriguez</td>
                                    <td class="center">125.5</td>
                                </tr>
                                <tr>
                                    <td class=" sorting_1">234234</td>
                                    <td>Constitucional</td>
                                    <td>Mario Rodriguez</td>
                                    <td class="center">125.5</td>
                                </tr>
                                <tr>
                                    <td class=" sorting_1">234234</td>
                                    <td>Constitucional</td>
                                    <td>Mario Rodriguez</td>
                                    <td class="center">125.5</td>
                                </tr>
                                <tr>
                                    <td class=" sorting_1">234234</td>
                                    <td>Constitucional</td>
                                    <td>Mario Rodriguez</td>
                                    <td class="center">125.5</td>
                                </tr>
                                <tr>
                                    <td class=" sorting_1">234234</td>
                                    <td>Constitucional</td>
                                    <td>Mario Rodriguez</td>
                                    <td class="center">125.5</td>
                                </tr>
                                <tr>
                                    <td class=" sorting_1">234234</td>
                                    <td>Constitucional</td>
                                    <td>Mario Rodriguez</td>
                                    <td class="center">125.5</td>
                                </tr>
                                <tr>
                                    <td class=" sorting_1">234234</td>
                                    <td>Constitucional</td>
                                    <td>Mario Rodriguez</td>
                                    <td class="center">125.5</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <br/>
                <br/>
                <br/>
                <br/>
                <br/>
            </div>

        </div>
    </div>
</div>
<%@include file="common/bottom.jspf" %>
<script src="js/highcharts.js"></script>
<script src="js/modules/exporting.js"></script>
<script type="text/javascript">
    $(function () {
        var chart;
        $(document).ready(function() {
            chart = new Highcharts.Chart({

                chart: {
                    renderTo: 'containerChart',
                    type: 'column'
                },

                title: {
                    text: 'Total de Expedientes por Proceso'
                },

                xAxis: {
                    categories: ['Penal', 'Laboral', 'Civil', 'Transito', 'Constitu.','Administ.']
                },

                yAxis: {
                    allowDecimals: false,
                    min: 0,
                    title: {
                        text: 'Numeros de Expedientes'
                    }
                },

                tooltip: {
                    formatter: function() {
                        return '<b>'+ this.x +'</b><br/>'+
                            this.series.name +': '+ this.y ;
                    }
                },

                series: [{
                        name: 'Totales',
                        data: [4251,5447,1250,3200,8520,680]
                    }, {
                        name: 'Pendientes',
                        data: [1751,1597,50,1346,4972,530]
                    }, {
                        name: 'Listos',
                        data: [2500,3850,1200,1854,3548,150]
                    }]
            });
        });

    });
</script>
<script>
    var selected = "Graf";
    var subSelected = "Graf2";

</script>